/*
 * This file is part of "photo-booth"
 * Copyright (c) 2018 Philipp Trenz
 *
 * For more information on the project go to
 * <https://github.com/philipptrenz/photo-booth>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, version 3.
 *
 * This program is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

a, a:hover, a:active, a:focus {
	color: #ebebeb;
	text-decoration: none;

}

html {
	overflow-x: hidden;
}

body {
	background-color: black;
}

/* -------------------- */

nav {
	padding: 0 30px;
	height: 64px;
	line-height: 64px;
	width: 100%;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
	font-size: 17px;
	display: block;
	color: #ebebeb;
	/*background-color: #4e5d6c;*/
	background: rgba(255, 255, 255, .1);
	margin-bottom: 15px;
}

nav .my-navbar {
	width: 100%;
	text-align: center;
}


nav .my-navbar .my-brand {
	text-align: left;
}

nav .my-navbar .my-back-button {
	font-size: 24px;
	text-align: right;
}

nav .my-navbar .my-back-button:hover {
}


nav .my-navbar .action-buttons {
	font-size: 1.2em;
	text-align: center;
}

nav .my-navbar .action-buttons a {
	margin: 0 10px;
}

@media (max-width: 767.98px) {
	nav .my-navbar .action-buttons {
		text-align: left;
	}
}

.hide{
  display: none !important;
}


/* -------------------- */


.table {
	display: table;
	width: 100%;
	padding: 0 0 20px;
}
.row {
	display: table-row;

}
.cell {
	display: table-cell;
	padding: 10px 10px 10px 0;
}

.cell:last-child {
	display: table-cell;
	padding: 10px 0;
}



/* -------------------- */


.wrapper {
	display: relative;
	transition: transform 1s ease-in-out;
}

.wrapper.show-settings {
	transform: translate3d(-100vw,0,0);

}

ul#photos {
	list-style-type: none;
	padding-left: 0;
}

ul#photos img {
	max-width: 100%;
}

ul#photos li {
	padding: 10px;
}

.windows {
	margin: 15px 0;
	padding: 10px;
	display: block;
}

.windows h3 {
	margin-top: 0;
}

.close-button {
	position: absolute;

	top: 12px;
	right: 17px;

	font-size: 25px;
}

.image {
	width: 100%;
	height: 100%;
	position: relative;

	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.image.selected .triangle {
	display: block;
}

.image .triangle {
	display: none;

	position: absolute;
	top: 0;
	right: 0;

	border-style: solid;
	border-width: 0 40px 40px 0;
	border-color: transparent rgba(255, 255, 255, 0.6) transparent transparent;
}

.image .overlay {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12%;
    display: inline-block;
	background: rgba(0, 0, 0, .4);

    font-size: 20px;

    text-align: right;
}

.image .overlay a {
	padding: 5px 10px;
}


/* -------------------- */

.buttons {
}

.buttons button {
	margin-bottom: 3px;
}

button, .btn, .btn-default {
	background: rgba(255, 255, 255, .1) !important;
}


.well {
	background: rgba(255, 255, 255, .1);
}

/* -------------------- */

input[type=range] {
    border: none;
}

p.range-field {

}

span.thumb {

}

.select-wrapper span.caret {
	/*display: none;*/
	color: rgb(235, 235, 235);

	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.container .btn {
	margin-bottom: 3px;
}

#print-page .step.layout-selection ul,
#print-page .step.photo-selection ul {
	list-style-type: none;
	padding-left: 0;
}

#print-page .step.layout-selection ul li,
#print-page .step.photo-selection ul li {
	margin: 3px;
	padding: 5px;

	cursor: pointer;
}

#print-page .step.layout-selection ul li img,
#print-page .step.photo-selection ul li img {
	max-width: 100%;
}

#print-page .step.photo-selection ul li.selected {
	background-color: darkgray;
}

#print-page .step.preview .preview-container img {
	max-width: 100%;
}